<template>
	<view v-if="window.data" class="box">
		<uni-grid 
		v-if="window.style.layout !== -1"
		:style="{'padding-top':window.style.paddingTop +'px',
		'padding-bottom':window.style.paddingTop +'px',
		'background-color':window.style.background}"
		:column="window.style.layout" :highlight="true"
		:showBorder="false">
			<uni-grid-item  v-for="(item, index) in window.data" :index="index" :key="index">
				<img :style="{'padding-left':window.style.paddingLeft+'px',
		'padding-right':window.style.paddingLeft+'px',}" class="imgItem" :src="item.imgUrl" alt="">
			</uni-grid-item>
		</uni-grid>
		<!-- --------------------------- -->
		<view v-else class="window">
			<view class="left">
				<img class="leftPic" :src="window.data[0].imgUrl" alt="">
			</view>
			<view class="right">
				<view class="top">
					<img class="topPic" :src="window.data[1].imgUrl" alt="">
				</view>
				<view class="bottom">
					<img class="bottomPic" :src="window.data[2].imgUrl" alt="">
					<img class="bottomPic" :src="window.data[3].imgUrl" alt="">
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
	export default {
		name:"my-window",
		data() {
			return {
				
			};
		},
		computed:{
			...mapState('home',['window'])
		}
	}
</script>

<style lang="scss" scoped>
.box{
	width: 750rpx;
	.uni-grid{
		width: 100%;
		display: flex !important;
		.uni-grid-item{
			width: 50%;
		}
		
	}
	
}
.window{
	width: 750rpx;
	height: 370rpx;
	display: flex;
	.left{
		flex: 1;
		.leftPic{
			width: 100%;
			height: 100%;
		}
	}
	.right{
		flex: 1;
		display: flex;
		flex-direction: column;
		.top{
			height: 50%;
			.topPic{
				width: 100%;
				height: 100%;
			}
		}
		.bottom{
			height: 50%;
			display: flex;
			.bottomPic{
				width: 50%;
			}
		}
		
	}
}
</style>